import {computed, defineComponent, ref, Fragment, onMounted, onUnmounted,} from "vue";
import Maincontainer from "@/components/maincontainer/index"
import useHttpMessage from "@/hooks/oftenattr"
import {
    NButton,
    NTag,
    NCard,
    NImage,
    NButtonGroup,
    NCollapseItem,
    NCollapse,
    NIcon,
    NTabs,
    NTabPane,
    NGrid,
    NGi,
    FormItemRule,
    NFormItem,
    NInput,
    NForm,
    NSelect,
    NCascader,
    NCheckboxGroup,
    NSpace,
    NCheckbox,
    NSwitch,
    NRadioGroup,
    NRadio,
    NDatePicker, NUpload, NUploadDragger, NText, NP,
} from "naive-ui";
import FlexForm from "@/components/flexform/refflexform"
import {EditOutlined} from "@vicons/antd"
import LeftNAV from "./leftnav"
import Draggable from "vuedraggable-es";
import {nanoid} from "nanoid";
import Fuwenben from "@/components/markdown/index"
import {ArchiveOutline as ArchiveIcon} from '@vicons/ionicons5'
import formlistObj from "./formtype"
import {ChevronUp, ChevronLeft, Delete, ChevronDown,} from "@vicons/carbon"

// 标签的类型
interface Tagitem {
    label: string,
    value: string,
}

type MySize = 'tiny' | 'small' | 'medium' | 'large' | undefined;
type Mypassword = "textarea" | "text" | "password" | undefined;

interface FormItem {
    move: false, // 是否可以移动
    slot?: string,  // 插槽内容
    id: string,  // 组件唯一标识
    show: boolean,   // 是否显示
    span: string,  //  宽度
    label: string, // 标题
    key: string, // 字段的键
    default: string, // 默认值
    type: string, // 表单类型
    placeholder?: string,// 提示文字
    inputtype?: string, // input输入框的类型
    clearable?: boolean, // 清楚按钮
    disabled?: boolean,// 不可编辑
    size: MySize, // 大小
    change?: null | Function,  // 改变的回调
    options?: string, // 备选项
    required: string, // 是否必填
    maxlength?: string, // 最大长度
    multiple?: string,  // 是否多选
    tooltip?: string, // 滑块覆盖的提示
    placement?: string, // 提示的弹出位置
    max?: string, // 最大值
    min?: string, // 最小值
    datatype?: string, // 时间选择器的类型
    round?: string,  // 是否是圆形
    valueField?: string,   // 关键字
    labelField?: string, // 关键字
    childrenField?: string,  // 关键字
    filterable?: string,  // 过滤功能
    rules?: Array<any> | undefined,  // 校验规则
    path: string | undefined,   // 所在路径
    password: Mypassword,    // 是不是密码
    prefix: Function | undefined,   // input前缀
    suffix: Function | undefined,   // input后缀
}


interface MUbanItem {
    name: string,
    img: string,
}

export default defineComponent({
    name: "CreateCode",
    setup() {
        /**********************************************************************************
         * 复用公共的钩子函数区域
         ***********************************************************************************/
        const {http, message} = useHttpMessage()
        /**********************************************************************************
         * 自定义函数和属性区域
         ***********************************************************************************/
            // 示例的列表
        const exampleOptions = ref([
                {label: "示例一", value: "1"},
                {label: "示例二", value: "2"},
                {label: "示例三", value: "3"},
            ])
        const mubanlist = ref<Array<MUbanItem>>([])
        const handleGetMuban = (muban: any) => {
            console.log("要加载的模板", muban);

        }

        //表单校验规则
        const checklabelwidth = (rule: FormItemRule, value: string) => {
            const regx = /^[1-9]\d*$/
            if (!value) {
                return true
            } else if (!regx.test(value)) {
                return new Error("请输入正整数")
            } else if (value.length > 10) {
                return new Error("最多10位字符")
            } else {
                return true
            }
        }
        // 全局配置
        const overformValue = ref({
            labelwidth: "100",
        })
        const overformList = ref([
            {
                span: 24,
                label: "label的宽度",
                key: "labelwidth",
                default: "100",
                type: "input",
                placeholder: "请输入label的宽度",
                rules: [
                    {required: true, message: "", triggher: ["change", "blur"],},
                    {validator: checklabelwidth, triggher: ["change", "blur"],}
                ],
            },
        ])
        // 组件配置
        const assformValue = ref({})
        const assformList = ref([])

        // 当前的屏幕模式
        const screenModel = ref("PC")
        const setscreenModel = (screen: "PC" | "Mobile" | "Pad") => {
            screenModel.value = screen
        }
        // 阻止火狐浏览器的拖拽导致打开百度搜索的bug
        const onEnd = () => {
            document.body.ondrop = (event: any) => {
                event.preventDefault();
                event.stopPropagation();
            }
        }

        // 当前创建的组件列表
        const zujianlist = ref<Array<any>>([])
        const group1 = {name: "list", pull: false, put: true}
        // 当前选中的组件
        const selectedItem = ref(null)
        // 点击某个组件
        const selectItem = (e: MouseEvent, canshu: any) => {
            e.preventDefault();
            e.stopPropagation();
            selectedItem.value = canshu ? canshu.element : null
            // 如果是空的，就置空表单数据和配置，如果不是，就放入
            if (canshu) {
                const result = formlistObj[canshu.element.type]
                assformList.value = result || []
                assformValue.value = canshu.element
            } else {
                assformList.value = []
                assformValue.value = {}
            }
        }
        // 删除组件
        const deleteItem = (e: MouseEvent, index: number) => {
            e.preventDefault();
            e.stopPropagation();
            zujianlist.value.splice(index, 1)
        }
        // 上移组件
        const moveUpItem = (e: MouseEvent, index: number) => {
            e.preventDefault();
            e.stopPropagation();
            if (index === 0) {
                message.info("已经在最上面了")
            } else {
                const item = {...zujianlist.value[index]}
                zujianlist.value.splice(index, 1)
                zujianlist.value.splice(index - 1, 0, item)
            }
        }
        // 下移组件
        const moveDownItem = (e: MouseEvent, index: number) => {
            e.preventDefault();
            e.stopPropagation();
            if (index === zujianlist.value.length - 1) {
                message.info("已经是最后一个了")
            } else {
                const item = {...zujianlist.value[index]}
                zujianlist.value.splice(index, 1)
                zujianlist.value.splice(index + 1, 0, item)
            }
        }
        /**********************************************************************************
         * 初始化和生命周期区域
         ***********************************************************************************/

        /**********************************************************************************
         * 抽离的jsx代码
         ***********************************************************************************/
            // 折叠面板的标题
        const CollapseTitle = (name: string) => <span class="text-base font-normal">{name}</span>

        // 模板库
        const formmuban = () => (<div class="w-full h-full overflow-x-hidden overflow-y-auto">
            {() => mubanlist.value.map((item, index) => {
                return <NCard contentStyle={"padding:0"}>
                    <NImage src={item.img}/>
                    <div class="w-full flex justify-between items-center">
                        <span class="flex-1 truncate">{`#${index}  ${item.name}`}</span>
                        <span class="text-blue-400 hover:text-red-400 cursor-pointer"
                              onClick={() => handleGetMuban(item)}>加载此模板</span>
                    </div>
                </NCard>
            })}
        </div>)
        // 全局配置
        const overconfig = () => (<div class="w-full h-full overflow-x-hidden overflow-y-auto">
            <NCollapse default-expanded-names="1" accordion>
                <NCollapseItem title="基本属性" name="1" v-slots={{
                    header: () => CollapseTitle("基本属性"),
                    default: () => <FlexForm value={overformValue} formList={overformList}
                                             labelWidth={120}/>,
                }}/>
                <NCollapseItem title="事件属性" name="2" v-slots={{
                    header: () => CollapseTitle("事件属性"),
                    default: () => (<Fragment>
                        <div class="w-full flex justify-between items-center px-5 my-5px text-base">
                            <span>onFormCreated</span>
                            <NButton round={true} v-slots={{icon: () => (<NIcon size={16}><EditOutlined/></NIcon>)}}
                                     size={"small"}>填写代码</NButton>
                        </div>
                        <div class="w-full flex justify-between items-center px-5 my-5px text-base">
                            <span>onFormMounted</span>
                            <NButton round={true} v-slots={{icon: () => (<NIcon size={16}><EditOutlined/></NIcon>)}}
                                     size={"small"}>填写代码</NButton>
                        </div>
                        <div class="w-full flex justify-between items-center px-5 my-5px text-base">
                            <span>onFormDataChange</span>
                            <NButton round={true} v-slots={{icon: () => (<NIcon size={16}><EditOutlined/></NIcon>)}}
                                     size={"small"}>填写代码</NButton>
                        </div>
                    </Fragment>)
                }}/>
            </NCollapse>
        </div>)
        // 组件配置
        const assconfig = () => (<div class="w-full h-full overflow-x-hidden overflow-y-auto">
            <NCollapse default-expanded-names="1" accordion>
                <NCollapseItem title="基本属性" name="1" v-slots={{
                    header: () => CollapseTitle("基本属性"),
                    default: () => assformList.value.length > 0 ?
                        <FlexForm value={assformValue} formList={assformList} labelWidth={120}/> :
                        <div class="my-2 w-full text-center text-gray-300">请先选择组件</div>,
                }}
                />
                <NCollapseItem title="事件属性" name="2" v-slots={{
                    header: () => CollapseTitle("事件属性"),
                    default: () => assformList.value.length > 0 ? <Fragment>
                        <div class="w-full flex justify-between items-center px-5 text-base my-5px">
                            <span>onFormCreated</span>
                            <NButton round={true} v-slots={{icon: () => (<NIcon size={16}><EditOutlined/></NIcon>)}}
                                     size={"small"}>填写代码</NButton>
                        </div>
                        <div class="w-full flex justify-between items-center px-5 text-base my-5px">
                            <span>onFormMounted</span>
                            <NButton round={true} v-slots={{icon: () => (<NIcon size={16}><EditOutlined/></NIcon>)}}
                                     size={"small"}>填写代码</NButton>
                        </div>
                        <div class="w-full flex justify-between items-center px-5 text-base my-5px">
                            <span>onFormDataChange</span>
                            <NButton round={true} v-slots={{icon: () => (<NIcon size={16}><EditOutlined/></NIcon>)}}
                                     size={"small"}>填写代码</NButton>
                        </div>
                    </Fragment> : <div class="my-2 w-full text-center text-gray-300">请先选择组件</div>,
                }}
                />
            </NCollapse>
        </div>)
        // 拖拽插槽用的右下标签
        const rightBottomTag = (itemindex: number) => <div class="absolute inset-0">
            <NIcon title={"选择父组件"} size={16} color={"#ffffff"}
                   class="absolute right-90px bottom-0 w-30px h-30px bg-blue-500 juzhong1 dianji">
                <ChevronLeft/>
            </NIcon>
            <NIcon title={"向上移动"} onClick={(e: MouseEvent) => moveUpItem(e, itemindex)} size={16} color={"#ffffff"}
                   class="absolute right-60px bottom-0 w-30px h-30px bg-blue-500 juzhong1  dianji">
                <ChevronUp/>
            </NIcon>
            <NIcon title={"向下移动"} onClick={(e: MouseEvent) => moveDownItem(e, itemindex)} size={16} color={"#ffffff"}
                   class="absolute right-30px bottom-0 w-30px h-30px bg-blue-500 juzhong1  dianji">
                <ChevronDown/>
            </NIcon>
            <NIcon size={16} color={"#ffffff"} onClick={(e: MouseEvent) => deleteItem(e, itemindex)}
                   class="absolute right-0 bottom-0 w-30px h-30px bg-blue-500 juzhong1  dianji">
                <Delete/>
            </NIcon>
        </div>
        // 拖拽插槽
        const slots = {
            item: (canshu: any) => {
                switch (canshu.element.type) {
                    // 父级栅格
                    case "row":
                        return <div onClick={(e: MouseEvent) => selectItem(e, canshu)}
                                    class={["w-full border border-black border-dashed min-h-10", selectedItem.value?.id === canshu.element.id ? "border border-blue-400" : "border-black"]}
                                    style={{"grid-column": `span 1 / span  ${canshu.element.span || 24}`}}>
                            {canshu.element.label + "："}
                        </div>
                    // 子级栅格
                    case "col":
                        return <div onClick={(e: MouseEvent) => selectItem(e, canshu)}
                                    class={["w-full border border-gray-400 border-dotted min-h-10"]}
                                    style={{"grid-column": `span 1 / span  ${canshu.element.span || 24}`}}>
                            {canshu.element.label + "："}
                        </div>
                    // 标签页
                    case "tag":
                        return <div onClick={(e: MouseEvent) => selectItem(e, canshu)}
                                    class={["w-full border border-gray-400 h-10 text-center"]}
                                    style={{"grid-column": `span 1 / span  ${canshu.element.span || 24}`}}>
                            {canshu.element.label + "："}
                        </div>
                    // 按钮
                    case "button":
                        return <div onClick={(e: MouseEvent) => selectItem(e, canshu)}
                                    class={["w-full border border-gray-400 h-10 text-center"]}
                                    style={{"grid-column": `span 1 / span  ${canshu.element.span || 24}`}}>
                            {canshu.element.label + "："}
                        </div>
                    // 输入框
                    case "input":
                        return <div class={["relative my-2 overflow-hidden",canshu.element.show ? "hidden" : "block"]}  title="文本输入框"
                                    style={{"grid-column-start": 1, "grid-column-end": canshu.element.span}}>
                            <NFormItem label={canshu.element.label + "："}
                                       class={["w-full min-h-10 ", selectedItem.value?.id === canshu.element.id ? "border border-blue-400" : ""]}
                                       onClick={(e: MouseEvent) => selectItem(e, canshu)}
                                       labelWidth={canshu.element.labelWidth} rule={[{
                                required: canshu.element.required,
                                message: "本项必填",
                                trigger: ["blue", "change"]
                            }]}
                                       path={canshu.element.path || canshu.element.key}>
                                <NInput value={null} size={canshu.element.size} defaultValue={canshu.element.default}
                                        type={canshu.element.inputType}
                                        clearable={canshu.element.clearable} disabled={canshu.element.disabled}
                                        placeholder={canshu.element.placeholder}
                                        maxlength={canshu.element.maxlength} minlength={canshu.element.minlength}
                                        round={canshu.element.round} showCount={canshu.element.showCount}/>
                            </NFormItem>
                            {selectedItem.value?.id === canshu.element.id ? rightBottomTag(canshu.index) : null}
                        </div>
                    // 选择框
                    case "select":
                        return <div class="relative my-2 overflow-hidden" title="文本输入框"
                                    style={{"grid-column-start": 1, "grid-column-end": canshu.element.span,}}>
                            <NFormItem label={canshu.element.label + "："}
                                       class={["w-full min-h-10", selectedItem.value?.id === canshu.element.id ? "border border-blue-400" : ""]}
                                       onClick={(e: MouseEvent) => selectItem(e, canshu)}
                                       labelWidth={canshu.element.labelWidth} rule={[{
                                required: canshu.element.required,
                                message: "本项必填",
                                trigger: ["blue", "change"]
                            }]}
                                       path={canshu.element.path || canshu.element.key}>
                                <NSelect value={null} options={canshu.element.options || exampleOptions.value}
                                         size={canshu.element.size} defaultValue={canshu.element.default}
                                         multiple={canshu.element.multiple}
                                         clearable={canshu.element.clearable} disabled={canshu.element.disabled}
                                         placeholder={canshu.element.placeholder}/>
                            </NFormItem>
                            {selectedItem.value?.id === canshu.element.id ? rightBottomTag(canshu.index) : null}
                        </div>
                    // 级联选择器
                    case "cascader":
                        return <div class="relative my-2 overflow-hidden" title="文本输入框"
                                    style={{"grid-column-start": 1, "grid-column-end": canshu.element.span,}}>
                            <NFormItem label={canshu.element.label + "："
                            }
                                       class={["w-full min-h-10", selectedItem.value?.id === canshu.element.id ? "border border-blue-400" : ""]}
                                       onClick={(e: MouseEvent) => selectItem(e, canshu)}
                                       labelWidth={canshu.element.labelWidth} rule={[{
                                required: canshu.element.required,
                                message: "本项必填",
                                trigger: ["blue", "change"]
                            }]}
                                       path={canshu.element.path || canshu.element.key}>
                                <NCascader value={null} options={canshu.element.options || exampleOptions.value}
                                           size={canshu.element.size} cascade={canshu.element.cascade}
                                           defaultValue={canshu.element.default} multiple={canshu.element.multiple}
                                           clearable={canshu.element.clearable} disabled={canshu.element.disabled}
                                           placeholder={canshu.element.placeholder}
                                           valueField={canshu.element.valueField}
                                           labelField={canshu.element.labelField}
                                           childrenField={canshu.element.childrenField}/>
                            </NFormItem>
                            {selectedItem.value?.id === canshu.element.id ? rightBottomTag(canshu.index) : null}
                        </div>
                    // 多选框
                    case "checkbox":
                        return <div class="relative my-2 overflow-hidden" title="文本输入框"
                                    style={{"grid-column-start": 1, "grid-column-end": canshu.element.span,}}>
                            <NFormItem label={canshu.element.label + "："}
                                       class={["w-full min-h-10", selectedItem.value?.id === canshu.element.id ? "border border-blue-400" : ""]}
                                       style={{"grid-column": `span 1 / span  ${canshu.element.span || 24}`}}
                                       onClick={(e: MouseEvent) => selectItem(e, canshu)}
                                       labelWidth={canshu.element.labelWidth} rule={[{
                                required: canshu.element.required,
                                message: "本项必填",
                                trigger: ["blue", "change"]
                            }]}
                                       path={canshu.element.path || canshu.element.key}>
                                <NCheckboxGroup value={null} disabled={canshu.element.disabled}
                                                defaultValue={canshu.element.default}
                                                size={canshu.element.size || "small"}>
                                    <NSpace>
                                        {() => (canshu.element.options ? canshu.element.options : exampleOptions.value).map((option: any) => {
                                            return <NCheckbox value={option.value} label={option.label}/>
                                        })}
                                    </NSpace>
                                </NCheckboxGroup>
                            </NFormItem>
                            {selectedItem.value?.id === canshu.element.id ? rightBottomTag(canshu.index) : null}
                        </div>
                    // 日期时间选择
                    case "picker":
                        return <div class="relative my-2 overflow-hidden" title="文本输入框"
                                    style={{"grid-column-start": 1, "grid-column-end": canshu.element.span,}}>
                            <NFormItem label={canshu.element.label + "："}
                                       class={["w-full min-h-10", selectedItem.value?.id === canshu.element.id ? "border border-blue-400" : ""]}
                                       style={{"grid-column": `span 1 / span  ${canshu.element.span || 24}`}}
                                       onClick={(e: MouseEvent) => selectItem(e, canshu)}
                                       labelWidth={canshu.element.labelWidth} rule={[{
                                required: canshu.element.required,
                                message: "本项必填",
                                trigger: ["blue", "change"]
                            }]}
                                       path={canshu.element.path || canshu.element.key}>
                                <NDatePicker value={null} type={canshu.element.dateType || "datetime"}
                                             placeholder={canshu.element.placeholder || "请选择"}
                                             clearable={canshu.element.clearable} disabled={canshu.element.disabled}
                                             size={canshu.element.size || "small"}>
                                </NDatePicker>
                            </NFormItem>
                            {selectedItem.value?.id === canshu.element.id ? rightBottomTag(canshu.index) : null}
                        </div>
                    // 单选框
                    case "radio":
                        return <div class="relative my-2 overflow-hidden" title="文本输入框"
                                    style={{"grid-column-start": 1, "grid-column-end": canshu.element.span,}}>
                            <NFormItem label={canshu.element.label + "："}
                                       class={["w-full min-h-10", selectedItem.value?.id === canshu.element.id ? "border border-blue-400" : ""]}
                                       style={{"grid-column": `span 1 / span  ${canshu.element.span || 24}`}}
                                       onClick={(e: MouseEvent) => selectItem(e, canshu)}
                                       labelWidth={canshu.element.labelWidth} rule={[{
                                required: canshu.element.required,
                                message: "本项必填",
                                trigger: ["blue", "change"]
                            }]}
                                       path={canshu.element.path || canshu.element.key}>
                                <NRadioGroup value={undefined}
                                             disabled={canshu.element.disabled} size={canshu.element.size || "small"}>
                                    <NSpace>
                                        {() => (canshu.element.options ? canshu.element.options : exampleOptions.value).map((option: any) => {
                                            return <NRadio value={option.value}>{option.label}</NRadio>
                                        })}
                                    </NSpace>
                                </NRadioGroup>
                            </NFormItem>
                            {selectedItem.value?.id === canshu.element.id ? rightBottomTag(canshu.index) : null}
                        </div>
                    // 开关
                    case "switch":
                        return <div class="relative my-2 overflow-hidden" title="文本输入框"
                                    style={{"grid-column-start": 1, "grid-column-end": canshu.element.span,}}>
                            <NFormItem label={canshu.element.label + "："}
                                       class={["w-full min-h-10", selectedItem.value?.id === canshu.element.id ? "border border-blue-400" : ""]}
                                       style={{"grid-column": `span 1 / span  ${canshu.element.span || 24}`}}
                                       onClick={(e: MouseEvent) => selectItem(e, canshu)}
                                       labelWidth={canshu.element.labelWidth} rule={[{
                                required: canshu.element.required,
                                message: "本项必填",
                                trigger: ["blue", "change"]
                            }]}
                                       path={canshu.element.path || canshu.element.key}>
                                <NSwitch value={undefined}
                                         round={canshu.element.round}
                                         disabled={canshu.element.disabled} size={canshu.element.size || "small"}>
                                </NSwitch>
                            </NFormItem>
                            {selectedItem.value?.id === canshu.element.id ? rightBottomTag(canshu.index) : null}
                        </div>
                    // 文本域
                    case "textarea":
                        return <div class="relative my-2 overflow-hidden" title="文本输入框"
                                    style={{"grid-column-start": 1, "grid-column-end": canshu.element.span,}}>
                            <NFormItem label={canshu.element.label + "："}
                                       class={["w-full min-h-10", selectedItem.value?.id === canshu.element.id ? "border border-blue-400" : ""]}
                                       style={{"grid-column": `span 1 / span  ${canshu.element.span || 24}`}}
                                       onClick={(e: MouseEvent) => selectItem(e, canshu)}
                                       labelWidth={canshu.element.labelWidth} rule={[{
                                required: canshu.element.required,
                                message: "本项必填",
                                trigger: ["blue", "change"]
                            }]}
                                       path={canshu.element.path || canshu.element.key}>
                                <NInput value={null} size={canshu.element.size} defaultValue={canshu.element.default}
                                        type={"textarea"}
                                        clearable={canshu.element.clearable} disabled={canshu.element.disabled}
                                        placeholder={canshu.element.placeholder}
                                        maxlength={canshu.element.maxlength} minlength={canshu.element.minlength}
                                        round={canshu.element.round} showCount={canshu.element.showCount}/>
                            </NFormItem>
                            {selectedItem.value?.id === canshu.element.id ? rightBottomTag(canshu.index) : null}
                        </div>
                    // 插槽
                    case "slot":
                        return <div class="w-full border border-gray-400 h-10 text-center"
                                    style={{"grid-column": `span 1 / span  ${canshu.element.span || 24}`}}>
                            {canshu.element.label + "："}
                        </div>
                    // 图片上传
                    case "imgupload":
                        return <div class="relative my-2 overflow-hidden" title="文本输入框"
                                    style={{"grid-column-start": 1, "grid-column-end": canshu.element.span,}}>
                            <NFormItem label={canshu.element.label + "："}
                                       class={["w-full min-h-10", selectedItem.value?.id === canshu.element.id ? "border border-blue-400" : ""]}
                                       style={{"grid-column": `span 1 / span  ${canshu.element.span || 24}`}}
                                       onClick={(e: MouseEvent) => selectItem(e, canshu)}
                                       labelWidth={canshu.element.labelWidth} rule={[{
                                required: canshu.element.required,
                                message: "本项必填",
                                trigger: ["blue", "change"]
                            }]}
                                       path={canshu.element.path || canshu.element.key}>
                                <NUpload
                                    max={canshu.element.maxfiles}
                                    directoryDnd={canshu.element.directoryDnd}
                                    action={""}
                                    v-slots={{
                                        default: () => {
                                            return canshu.element.directoryDnd ? <NUploadDragger>
                                                <div style={"margin-bottom: 12px"}>
                                                    <NIcon size={48} depth={3}>
                                                        <ArchiveIcon/>
                                                    </NIcon>
                                                </div>
                                                <NText style={"font-size: 16px"}>
                                                    点击或者拖动文件到该区域来上传
                                                </NText>
                                                <NP depth={3} style={"margin: 8px 0 0 0"}>
                                                    请不要上传敏感数据，比如你的银行卡号和密码，信用卡号有效期和安全码
                                                </NP>
                                            </NUploadDragger> : <NButton>上传文件</NButton>
                                        },
                                    }}
                                />
                            </NFormItem>
                            {selectedItem.value?.id === canshu.element.id ? rightBottomTag(canshu.index) : null}
                        </div>
                    // 文件上传
                    case "fileupload":
                        return <div class="relative my-2 overflow-hidden" title="文本输入框"
                                    style={{"grid-column-start": 1, "grid-column-end": canshu.element.span,}}>
                            <NFormItem label={canshu.element.label + "："}
                                       class={["w-full min-h-10", selectedItem.value?.id === canshu.element.id ? "border border-blue-400" : ""]}
                                       style={{"grid-column": `span 1 / span  ${canshu.element.span || 24}`}}
                                       onClick={(e: MouseEvent) => selectItem(e, canshu)}
                                       labelWidth={canshu.element.labelWidth} rule={[{
                                required: canshu.element.required,
                                message: "本项必填",
                                trigger: ["blue", "change"]
                            }]}
                                       path={canshu.element.path || canshu.element.key}>
                                <NUpload
                                    max={canshu.element.maxfiles}
                                    directoryDnd={canshu.element.directoryDnd}
                                    action={""}
                                    listType={canshu.element.listType}
                                    v-slots={{
                                        default: () => {
                                            return canshu.element.directoryDnd ? <NUploadDragger>
                                                <div style={"margin-bottom: 12px"}>
                                                    <NIcon size={48} depth={3}>
                                                        <ArchiveIcon/>
                                                    </NIcon>
                                                </div>
                                                <NText style={"font-size: 16px"}>
                                                    点击或者拖动文件到该区域来上传
                                                </NText>
                                                <NP depth={3} style={"margin: 8px 0 0 0"}>
                                                    请不要上传敏感数据，比如你的银行卡号和密码，信用卡号有效期和安全码
                                                </NP>
                                            </NUploadDragger> : <NButton>上传文件</NButton>
                                        },
                                    }}
                                />
                            </NFormItem>
                            {selectedItem.value?.id === canshu.element.id ? rightBottomTag(canshu.index) : null}
                        </div>
                    // 富文本编辑器
                    case "richtext":
                        return <div class="relative my-2 overflow-hidden" title="文本输入框"
                                    style={{"grid-column-start": 1, "grid-column-end": canshu.element.span,}}>
                            <NFormItem label={canshu.element.label + "："} class="w-full"
                                       style={{"grid-column": `span 1 / span  ${canshu.element.span || 24}`}}>
                                <Fuwenben
                                    menulist={['bold', 'underline', 'italic', '-', 'title', 'strikeThrough', 'sub', 'sup', 'quote', 'unorderedList', 'orderedList', 'task', '-',]}/>
                            </NFormItem>
                            {selectedItem.value?.id === canshu.element.id ? rightBottomTag(canshu.index) : null}
                        </div>
                }
            }
        }
        return () => (
            <Maincontainer>
                <div
                    class="absolute left-0 top-0 w-full h-10 px-10px py-5px bg-white mb-2px flex justify-between items-center border-b ">
                    <div class="w-200px flex items-center">
                        <span>表单设计器</span>
                    </div>
                    <div class="flex-1 h-10 flex justify-evenly items-center my-10px">
                        <NButtonGroup>
                            <NButton onClick={() => setscreenModel("PC")}
                                     type={screenModel.value === "PC" ? "info" : "default"}>桌面</NButton>
                            <NButton onClick={() => setscreenModel("Pad")}
                                     type={screenModel.value === "Pad" ? "info" : "default"}>平板</NButton>
                            <NButton onClick={() => setscreenModel("Mobile")}
                                     type={screenModel.value === "Mobile" ? "info" : "default"}>手机</NButton>
                        </NButtonGroup>
                        <NButtonGroup>
                            <NButton onClick={() => {
                                zujianlist.value = []
                            }}>清空</NButton>
                            <NButton>预览</NButton>
                            <NButton>生成</NButton>
                        </NButtonGroup>
                    </div>
                    <div class="w-200px"/>
                </div>
                <div class="absolute left-0 right-0 top-10 bottom-0 flex">
                    <div
                        class="w-1/6 h-full flex flex-col overflow-x-hidden overflow-y-auto bg-white px-2">
                        <NTabs justify-content={"space-evenly"} type={"line"} animated={true}>
                            <NTabPane name={"组件库"} tab={"组件库"}>
                                <LeftNAV/>
                            </NTabPane>
                            <NTabPane name={"表单模板"} tab={"表单模板"} v-slots={{default: formmuban}}>
                            </NTabPane>
                        </NTabs>
                    </div>
                    <NForm model={{}} rules={{}}
                           label-width={overformValue.value.labelwidth}
                           label-placement={"left"}
                           onClick={(e: MouseEvent) => {
                               selectItem(e, null)
                           }}
                           class="flex-1 h-full relative  border-r border-l border-gray-400">
                        <Draggable
                            class="w-full h-full p-2 grid grid-cols-24 grid-flow-row-dense auto-rows-min gap-2 overflow-x-hidden overflow-y-auto"
                            style={{"backgroundColor": `rgba(255,255,255,${zujianlist.value.length === 0 ? 0 : 1})`}}
                            list={zujianlist.value}
                            v-slots={slots}
                            onEnd={onEnd}
                            item-key={"id"}
                            group={group1}
                        >
                        </Draggable>
                        <div class="absolute inset-0 juzhong1 bg-gray-400 -z-1">
                            <span class="text-black text-opacity-50 select-none">请从左侧列表中选择一个组件，然后拖拽到这里</span>
                        </div>
                    </NForm>
                    <div
                        class="w-1/4 h-full flex flex-col bg-white px-2 overflow-x-hidden overflow-y-auto">
                        <NTabs justify-content={"space-evenly"} type={"line"} animated={true}>
                            <NTabPane name={"表单全局配置"} tab={"表单全局配置"} v-slots={{default: overconfig}}>
                            </NTabPane>
                            <NTabPane name={"组件设置"} tab={"组件设置"} v-slots={{default: assconfig}}>
                            </NTabPane>
                        </NTabs>
                    </div>
                </div>
            </Maincontainer>
        )
    },
})


